<template>
  <div class="detail">
    <sponsor
      :cover="sponsor.cover"
      :name="sponsor.name"
      :description="sponsor.description"
      :content="sponsor.content"
    >
    </sponsor>

    <attendant
      :name="attendant.nickname"
      :slogan="attendant.slogan"
      :avatar="attendant.avatar"
      :target="target"
      :person="attendant.person_count"
      :paymen="attendant.payment_count">
    </attendant>

    <ul class="nav">
      <li v-bind:class="{current:paymentsNav}" v-on:click="payNav">支持人</li>
      <li v-bind:class="{current:commentsNav}" v-on:click="comNav">活动评价</li>
    </ul>

    <div>
      <div class="paymentBox"  v-for="payment in payments" v-show="paymentsNav">
        <ul class="paymentIn">
          <li class="imgBox">
            <img v-bind:src="payment.avatar">
          </li>
          <li class="font">
            <div class="nameBox"><p class="name">{{payment.nickname}}</p><p class="money">支持：<span>{{payment.amount}}</span></p></div>
            <article>{{payment.comment}}</article>
            <p class="time">{{payment.updated_at}}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="commentInput" v-show="commentsNav">
      <input type="text" class="txt" v-model="content">
      <input type="button" class="btn" value="发表评价" @click="Evaluate">
    </div>

    <div>
      <div class="commentBox" v-for="comment in comments" v-show="commentsNav">
        <ul class="commentIn">
          <li class="imgBox">
            <img v-bind:src="comment.avatar" alt="">
          </li>
          <li class="font">
            <div class="nameBox"><p class="name">{{comment.nickname}}</p></div>
            <article>{{comment.content}}</article>
            <p class="time">{{comment.created_at}}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="tips" v-show="tips">
      <tips></tips>
      <div class="btn" @click="tips = false"></div>
    </div>

    <ul class="btnNav">
      <li class="li01" v-bind:class="{comment:payment}" @click="pay" ref="li01">{{comment}}</li>
      <li class="li02" v-bind:class="{sign:signed}" @click="clickSign">{{sign}}</li>
    </ul>

    <div class="boxnull"></div>
  </div>
</template>

<script>
  import { requestEvaluate, requestMe, requestDetail } from '../../api/api'
  import { shareUrl, baseUrl } from '../../config'
  export default{
    name: 'detail',
    data () {
      return {
        sponsor: [],
        attendant: [],
        target: '',
        paymentsNav: true,
        commentsNav: false,
        payments: [],
        comments: [],
        content: '',
        tips: false,
        comment: '我要支持',
        sign: '我要报名',
        payment: false,
        signed: false,
        hasReg: [],
        owner: false,
        nickname: '',
        avatar: '',
        username: '',
        useravatar: '',
        spreaderId: ''
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        const _this = this
        this.loadMe().then(function () {
          _this.loadData().then(function () {
            window.wx.ready(function () {
              const shareobj = {
                title: '这是' + _this.username + '的梦想，快让' + _this.username + '的梦想实现吧！',
                imgUrl: _this.useravatar,
                desc: _this.sponsor.description,
                link: shareUrl + '/activity?detailId=' + _this.$route.query.detailId + '&sponsorsId=' + _this.$route.query.sponsorsId + '&spreaderId=' + _this.spreaderId,
                success: function () {
                  _this.$swal('成功', '分享成功', 'success')
                }
              }
              window.wx.onMenuShareTimeline(shareobj)
              window.wx.onMenuShareAppMessage(shareobj)
              window.wx.onMenuShareQQ(shareobj)
              window.wx.onMenuShareWeibo(shareobj)
              window.wx.onMenuShareQZone(shareobj)
            })
          })
        })
      })
    },
    methods: {
      payNav: function () {
        this.paymentsNav = true
        this.commentsNav = false
      },
      comNav: function () {
        this.paymentsNav = false
        this.commentsNav = true
      },
      loadData: function () {
        let e = this
        return requestDetail(this.$route.query.sponsorsId, this.$route.query.detailId, {}).then(function (res) {
          if (res && res.data) {
            if (res.data.sponsor === null) {
              e.$swal('抱歉', '活动已过期', 'error')
              return false
            }
            e.sponsor = res.data.sponsor
            e.attendant = res.data
            e.target = res.data.sponsor.target_payment
            e.user = res.data
            e.username = res.data.nickname
            e.useravatar = res.data.avatar
            if (res.data.spreader) {
              e.spreaderId = res.data.spreader.data.id
            } else {
              e.spreaderId = e.$route.query.spreaderId
            }
            if (res.data.comments !== undefined) {
              e.comments = res.data.comments.data
            }
            if (res.data.payments !== undefined) {
              e.payments = res.data.payments.data
            }
            if (res.data.owner === true) {
              e.comment = '分享请求支持'
              e.signed = true
            }
            if (e.attendant.payment_count >= e.target) {
              e.comment = '恭喜你已完成'
              e.payment = true
            }
            if (res.data.has_reg !== null) {
              e.sign = '我已报名'
              e.hasReg = res.data.has_reg
            }
          }
        })
      },
      loadMe: function () {
        let e = this
        return requestMe({}).then(function (res) {
          if (res) {
            e.nickname = res.nickname
            e.avatar = res.avatar
          }
        })
      },
      Evaluate: function () {
        if (this.content === '') {
          this.$swal('错误', '内容不能为空', 'error')
          return false
        }
        if (this.content.length > 200) {
          this.$swal('错误', '字数不要超过200字', 'error')
          return false
        }
        let e = this
        requestEvaluate(this.$route.query.detailId, {
          nickname: this.nickname,
          content: this.content,
          avatar: this.avatar
        }).then(function (res) {
          e.$swal('成功', '发表成功', 'success')
          e.comments.unshift(res.data.data)
          e.content = ''
        })
      },
      pay: function () {
        if (this.comment === '我要支持') {
          this.$router.push('/payment?detailId=' + this.$route.query.detailId + '&sponsorsId=' + this.$route.query.sponsorsId)
        } else if (this.comment === '分享请求支持') {
          this.tips = true
        } else {
          this.tips = false
        }
      },
      clickSign: function () {
        if (this.sign === '我要报名') {
          this.$router.push('/sign?detailId=' + this.$route.query.detailId + '&sponsorsId=' + this.$route.query.sponsorsId + '&spreaderId=' + this.$route.query.spreaderId)
        } else if (this.sign === '我已报名' && (this.comment === '我要支持' || this.comment === '恭喜你已完成') && this.signed === false) {
          window.location.href = baseUrl + '/detail?detailId=' + this.hasReg.id + '&sponsorsId=' + this.hasReg.sponsor_id + '&spreaderId=' + this.hasReg.spreader_id
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @in:30.5rem;
  @border:#e8e8e8;
  @font:#8e8e8e;
  @orange:#f1ae9b;
  body{
    background: #fff;
  }
  .boxnull{
    width: 100%;
    height: 3.2rem;
  }
  .detail {
    width: 100%;
    height: auto;
    overflow: hidden;
    .nav {
      width: 100%;
      height: 50/2/10rem;
      li {
        width: 50%;
        height: 50/2/10rem;
        float: left;
        text-align: center;
        line-height: 50/2/10rem;
        font-size: 1.2rem;
      }
      .current {
        color: @orange;
      }
    }
    .paymentBox {
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom: 1px solid @border;
      .paymentIn {
        width: @in;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
        padding: 1rem 0;
        .imgBox {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          overflow: hidden;
          float: left;
          margin: 0 1.5rem;
          img {
            width: 3rem;
            height: 3rem;
            display: block;
          }
        }
        .font {
          float: left;
          width: 24.5rem;
          .nameBox {
            font-size: 1.1rem;
            height: auto;
            overflow: hidden;
            color: #000;
            padding-right: 2rem;
            .name {
              float: left;
            }
            .money {
              float: right;
              margin-left: 10rem;
              span {
                color: @orange;
              }
            }
          }
          article {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-bottom: 0.4rem;
            font-size: 1.1rem;
          }
          .time {
            float: right;
          }
        }
      }
    }
    .commentInput {
      width: @in;
      height: 60/2/10rem;
      margin: 0.5rem auto;
      position: relative;
      border-radius: 0.25rem;
      overflow: hidden;
      .txt {
        width: @in;
        height: 60/2/10rem;
        position: absolute;
        left: 0;
        top: 0;
        background: #ededed;
        padding-left: 0.5rem;
        box-sizing: border-box;
        font-size:1.2rem;
        padding-right: 10.5rem;
      }
      .btn {
        width: 200/2/10rem;
        height: 3rem;
        background: @orange;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0.25rem;
        color: #fff;
        font-size:1.2rem;
      }
    }
    .commentBox {
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom: 1px solid @border;
      .commentIn {
        width: @in;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
        padding: 15/2/10rem 0;
        .imgBox {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          overflow: hidden;
          float: left;
          margin: 0 30/2/10rem;
          img {
            width: 3rem;
            height: 3rem;
            display: block;
          }
        }
        .font {
          float: left;
          width: 24.5rem;
          .nameBox {
            font-size: 1.1rem;
            height: auto;
            overflow: hidden;
            color: #000;
            .name {
              float: left;
            }
            .money {
              float: left;
              margin-left: 10rem;
              span {
                color: @orange;
              }
            }
          }
          article {
            overflow: hidden;
            /*text-overflow: ellipsis;*/
            /*display: -webkit-box;*/
            /*-webkit-box-orient: vertical;*/
            /*-webkit-line-clamp: 2;*/
            margin-bottom: 0.4rem;
            font-size: 1.1rem;
          }
          .time {
            float: right;
          }
        }
      }
    }
    .btnNav {
      width: 100%;
      height: 3.2rem;
      position: fixed;
      left: 0;
      bottom: 0;
      li {
        float: left;
        width: 50%;
        height: 3.2rem;
        text-align: center;
        line-height: 3.2rem;
        color: #fff;
        font-size: 1.2rem;
      }
      .li01 {
        background: #96e896;
      }
      .li02 {
        background: @orange;
      }
      .comment{
        background: #8e8e8e;
        border-right: 1px solid #fff;
        box-sizing: border-box;
      }
      .sign {
        background: #8e8e8e;
      }
    }
    .detailBox {
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom: 3px solid #ededed;
      position: relative;
      padding-bottom: 1rem;
      button {
        color: #f1ae9b;
        background: #fff url(../../assets/images/arrow.png) no-repeat center top;
        -webkit-background-size: 1.2rem 13/2/10rem;
        background-size: 1.2rem 13/2/10rem;
        float: right;
        width: 5rem;
        padding-top: 1rem;
        height: 2.5rem;
        font-size: 0.9rem;
        position: absolute;
        right: 1rem;
        bottom: 0.5rem;
      }
    }
    .tips {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
      Null {
        position: fixed;
        left: 0;
        top: 0;
      }
      .btn {
        width: 100%;
        height: 5rem;
        position: fixed;
        left: 0;
        top: 42%;
      }
    }
  }
</style>
